<#-- 添加文件头注释说明 -->
<#-- 模板参数说明:
     domain - 领域对象名称(小驼峰)
     do_main - 领域对象名称(中划线分隔)
     module - 模块名称
     tableNameCn - 表中文名
     fieldList - 字段列表
     readOnly - 是否只读
-->
<template>
    <div class="main-div">
        <!-- 搜索过滤卡片 -->
        <a-card bordered :bodyStyle="{ padding: '12px' }" style="margin-bottom: 5px;">
            <a-form
                    :model="params"
                    layout="horizontal"
                    labelAlign="right"
            >
                <a-row :gutter="[16, 12]">
                    <#list fieldList as field>
                        <a-col :span="6">
                            <a-form-item label="${field.comment}" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                                <#if field.enums >
                                    <a-select v-model:value="params.${field.nameHump}" placeholder="全部">
                                        <a-select-option v-for="item in ${field.enumsConst}_ARRAY" :key="item.code" :value="item.code">
                                            {{item.desc}}
                                        </a-select-option>
                                    </a-select>
                                <#elseif field.javaType == "String" || field.javaType == "Integer" || field.javaType == "Long">
                                        <a-input v-model:value="params.${field.nameHump}" placeholder="请输入${field.comment}" />
                                <#elseif field.type == "datetime">
                                    <a-date-picker v-model:value="params.${field.nameHump}" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" placeholder="请选择${field.comment}" />
                                <#elseif field.type == "date">
                                    <a-date-picker v-model:value="params.${field.nameHump}" value-format="YYYY-MM-DD" style="width: 100%" placeholder="请选择${field.comment}" />
                                <#elseif field.javaType == "BigDecimal">
                                    <a-input-number
                                            v-model:value="params.${field.nameHump}"
                                            :disabled="isViewMode"
                                            :min="0"
                                            :precision="2"
                                            :step="0.01"
                                            style="width: 100%"
                                            placeholder="请输入${field.comment}"
                                    />
                                <#elseif field.type == "year">
                                    <a-date-picker v-model:value="params.${field.nameHump}" value-format="YYYY" style="width: 100%" placeholder="请输入${field.comment}" />
                                <#elseif field.type == "timestamp">
                                    <a-date-picker v-model:value="params.${field.nameHump}" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" placeholder="请输入${field.comment}" />
                                </#if>
                            </a-form-item>
                        </a-col>
                    </#list>

                    <a-col :span="6">
                        <a-space style="margin-left: 45px">
                            <a-button type="primary" @click="handleQuery()">查询</a-button>
                            <a-button @click="reset">重置</a-button>
                        </a-space>
                    </a-col>
                </a-row>
            </a-form>
        </a-card>

        <!-- 表格和操作按钮卡片 -->
        <a-card bordered :bodyStyle="{ padding: '12px' }" style="margin-bottom: 12px;">
            <div class="operation-buttons" style="margin-bottom: 10px;">
                <a-space>
                    <a-button type="primary" @click="onAdd">新增</a-button>
                    <a-button danger @click="batchDelete">删除</a-button>
                    <a-button @click="exportData">导出</a-button>
                </a-space>
            </div>

            <a-table
                    :dataSource="${domain}s"
                    :columns="columns"
                    :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
                    :pagination="pagination"
                    :loading="loading"
                    row-key="id"
                    bordered
                    @change="handleTableChange"
            >
                <template #bodyCell="{ column, record, index }">
                    <template v-if="column.key === 'index'">{{ index + 1 }}</template>
                    <#list fieldList as field>
                        <#if field.enums>
                            <template v-else-if="column.dataIndex === '${field.nameHump}'">
                                <span v-for="item in ${field.enumsConst}_ARRAY" :key="item.code">
                                    <span v-if="item.code === record.${field.nameHump}">
                                        {{item.desc}}
                                    </span>
                                </span>
                            </template>
                        </#if>
                    </#list>
                    <template v-if="column.key === 'actions'">
                        <a-space>
                            <a-button type="primary" size="small" @click="onEdit(record)">编辑</a-button>
                            <a-button size="small" @click="onLook(record)">查看</a-button>
                            <a-button size="small" danger @click="onDelete(record)">删除</a-button>
                        </a-space>
                    </template>
                </template>
            </a-table>
        </a-card>
    </div>
    <a-modal
            v-model:visible="visible"
            :title="isViewMode ? '查看' : '新增/编辑'"
            :footer="isViewMode ? null : undefined"
            :okText="isViewMode ? undefined : '确认'"
            @ok="handleOk"
            cancel-text="关闭"
            width="800px"
    >
        <a-form
                :model="${domain}"
                :label-col="{ span: 7 }"
                :wrapper-col="{ span: 17 }"
                layout="horizontal"
                style="font-size: 30px;"
        >
            <a-row :gutter="[16, 16]">
                <#list fieldList as field>
                    <a-col :span="12">
                        <a-form-item label="${field.comment}" style="margin-bottom: 20px;">
                            <#if field.enums>
                                <a-select v-model:value="${domain}.${field.nameHump}" placeholder="请选择${field.nameCn}" :disabled="isViewMode">
                                    <a-select-option
                                            v-for="item in ${field.enumsConst}_ARRAY"
                                            :key="item.code"
                                            :value="item.code"
                                    >
                                        {{ item.desc }}
                                    </a-select-option>
                                </a-select>
                            <#elseif field.javaType == "String" || field.javaType == "Integer" || field.javaType == "Long">
                                    <a-input v-model:value="${domain}.${field.nameHump}" :disabled="isViewMode" placeholder="请输入${field.comment}" />
                            <#elseif field.type == "date">
                                <a-date-picker
                                        v-model:value="${domain}.${field.nameHump}"
                                        value-format="YYYY-MM-DD"
                                        style="width: 100%;"
                                        placeholder="请选择日期"
                                        :disabled="isViewMode"
                                />
                            <#elseif field.type == "datetime">
                                <a-date-picker
                                        v-model:value="${domain}.${field.nameHump}"
                                        value-format="YYYY-MM-DD HH:mm:ss"
                                        style="width: 100%;"
                                        placeholder="请选择日期"
                                        :disabled="isViewMode"
                                />
                            <#elseif field.type == "year">
                                <a-input-number
                                        v-model:value="${domain}.${field.nameHump}"
                                        :min="1900"
                                        :max="2100"
                                        placeholder="请输入年份"
                                        style="width: 100%;"
                                        :disabled="isViewMode"
                                />
                            <#elseif field.javaType == "BigDecimal">
                                <a-input-number
                                        v-model:value="${domain}.${field.nameHump}"
                                        :disabled="isViewMode"
                                        :min="0"
                                        :precision="2"
                                        :step="0.01"
                                        style="width: 100%"
                                        placeholder="请输入${field.comment}"
                                />
                            <#elseif field.nameHump == "color">
                                <div style="display: flex; align-items: center; height: 32px;">
                                    <input
                                            type="color"
                                            v-model="${domain}.${field.nameHump}"
                                            style="border: none; width: 100%; height: 100%; cursor: pointer;"
                                            :disabled="isViewMode"
                                    />
                                </div>
                            </#if>
                        </a-form-item>
                    </a-col>
                </#list>
            </a-row>
        </a-form>
    </a-modal>
</template>

<script>
    import {ref, onMounted, defineComponent} from 'vue';
    import {batchDelete_api, delete_api, page_api, save_api} from "@/api/risk/${domain}";
    import {Modal, notification} from "ant-design-vue";
    import dayjs from 'dayjs';

    export default defineComponent ({
        name: '${Domain}Table',
        setup() {
            <#list fieldList as field>
            <#if field.enums>
            const ${field.enumsConst}_ARRAY = window.${field.enumsConst}_ARRAY;
            </#if>
            </#list>
            const selectedRowKeys = ref([])
            const visible = ref(false);
            const ${domain}s = ref([]);
            const isViewMode = ref(false);
            let ${domain} = ref({
                id: null,
                <#list fieldList as field>
                ${field.nameHump}: ${field.defaultValue!'null'},
                </#list>
            })

            const pagination = ref({
                total: 0,
                current: 1,
                pageSize: 10,
            })

            const loading = ref(false)
            const params = ref({
                <#list fieldList as field>
                ${field.nameHump}: undefined,
                </#list>
            })

            const columns = [
                { title: '序号', key: 'index' },
                <#list fieldList as field>
                {
                    title: '${field.comment}',
                    dataIndex: '${field.nameHump}',
                    key: '${field.nameHump}'
                    <#if field.javaType == "Date">
                    ,customRender: ({ text }) => text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '-'
                    <#elseif field.type == "year">
                    ,customRender: ({ text }) => text ? `${text}年` : '-'
                    </#if>
                },
                </#list>
                { title: '操作', key: 'actions' }
            ]

            const handleQuery = (param) => {
                if (!param) {
                    param = {
                        page: 1,
                        size: pagination.value.pageSize
                    }
                }
                let req = {
                    page: param.page,
                    size: param.size,
                    ...params.value
                }
                loading.value = true
                page_api(req).then((response) => {
                    loading.value = false
                    const data = response.data
                    if (data.success) {
                        ${domain}s.value = data.content.records
                        pagination.value.current = param.page
                        pagination.value.total = data.content.total
                    } else {
                        notification.error({ description: data.message })
                    }
                })
            }

            const reset = () => {
                params.value = {
                    <#list fieldList as field>
                    ${field.nameHump}: undefined,
                    </#list>
                }
                pagination.value.current = 1
                handleQuery({ page: 1, size: pagination.value.pageSize })
            }

            const onAdd = () => {
                isViewMode.value = false;
                ${domain}.value = {
                    id: null,
                    <#list fieldList as field>
                    ${field.nameHump}: ${field.defaultValue!'null'},
                    </#list>
                };
                visible.value = true;
            }

            const batchDelete = () => {
                if (selectedRowKeys.value.length === 0) {
                    notification.warning({description: "请选择要删除的记录！"});
                    return;
                }
                const modal = Modal.confirm({
                    title: '确认批量删除',
                    content: `确定要删除选中的 $666{selectedRowKeys.value.length} 条记录吗？`,
                    okText: '确认',
                    cancelText: '取消',
                    onOk: () => {
                        batchDelete_api(selectedRowKeys.value).then(response => {
                            const data = response.data;
                            if (data.success) {
                                notification.success({description: "批量删除成功！"});
                                selectedRowKeys.value = [];
                                handleQuery({
                                    page: pagination.value.current,
                                    size: pagination.value.pageSize
                                });
                            }
                        });
                    }
                });
            }

            const exportData = () => {
                // 导出逻辑
            }

            const onEdit = (record) => {
                isViewMode.value = false;
                ${domain}.value = window.Tool.copy(record);
                visible.value = true;
            }

            const onLook = (record) => {
                isViewMode.value = true;
                ${domain}.value = window.Tool.copy(record);
                visible.value = true;
            }

            const onDelete = (record) => {
                const modal = Modal.confirm({
                    title: '确认删除',
                    content: `确定要删除这条记录吗？`,
                    okText: '确认',
                    cancelText: '取消',
                    onOk: () => {
                        delete_api(record.id).then(response => {
                            const data = response.data;
                            if (data.success) {
                                notification.success({description: "删除成功！"});
                                handleQuery({
                                    page: pagination.value.current,
                                    size: pagination.value.pageSize
                                });
                            }
                        });
                    }
                });
            }

            const handleOk = () => {
                save_api(${domain}.value).then((response) => {
                    let data = response.data;
                    if (data.success) {
                        notification.success({description: "保存成功！"});
                        visible.value = false;
                        handleQuery({
                            page: pagination.value.current,
                            size: pagination.value.pageSize
                        });
                    } else {
                        notification.error({description: data.message});
                    }
                });
            };

            const onSelectChange = (selectedKeys) => {
                selectedRowKeys.value = selectedKeys;
            }

            const handleTableChange = (page) => {
                // console.log("看看自带的分页参数都有啥：" + JSON.stringify(page));
                pagination.value.pageSize = page.pageSize;
                handleQuery({
                    page: page.current,
                    size: page.pageSize
                });
            };

            onMounted(() => {
                handleQuery({
                    page: 1,
                    size: pagination.value.pageSize
                });
            })

            return {
                <#list fieldList as field>
                <#if field.enums>
                ${field.enumsConst}_ARRAY,
                </#if>
                </#list>
                ${domain},
                ${domain}s,
                selectedRowKeys,
                handleTableChange,
                pagination,
                loading,
                params,
                columns,
                handleQuery,
                reset,
                onAdd,
                batchDelete,
                exportData,
                onEdit,
                onLook,
                onDelete,
                onSelectChange,
                visible,
                handleOk,
                isViewMode
            }
        }
    })
</script>

<style scoped>
.main-div {
    padding: 12px;
    background-color: #ffffff;
}
::v-deep(.ant-form-item) {
    margin-bottom: 0px;
}
.operation-buttons {
    margin-bottom: 12px;
}
</style>